import React, { useEffect, useState } from 'react';
import {useLocation ,useNavigate} from 'react-router-dom'
import http from '../../http'
import { Search as VantSearch } from 'react-vant';
import { ArrowLeft } from '@react-vant/icons';
import {debounce} from 'lodash'
import styles from './SearchList.module.scss'
export default function SearchList() {
    const navigate=useNavigate()
       // 获取查询字符串参数
      const location = useLocation();
    const params = new URLSearchParams(location.search);
    const paramValue = params.get('param');
const [value, setValue] = useState<any>(paramValue);

//医生数据
interface DoctorType{
  doctorId:number,
  doctorName:string
}
 const [doctorList,setdoctorList]=useState<DoctorType[]>([])
//药品数据
interface DrugsType{
  drugsId:number,
  drugsName:string
}
const [drugsList,setdrugsList]=useState<DrugsType[]>([])
//病症数据
interface DiseaseType{
  diseaseId:number,
  diseaseName:string
}
const [diseaseList,setdiseaseList]=useState<DiseaseType[]>([])
    
  useEffect(() => {
    // 在控制台打印参数值，你可以根据需要进行其他操作
    //根据Url的携带参数查找数据
     if (value) {
      // 执行你的操作
        http.get('/health/share/v1/homePageSearch',{params:{keyWord:value}}).then((res:any)=>{
           setdiseaseList(res.result.diseaseSearchVoList)
           setdoctorList(res.result.doctorSearchVoList)
           setdrugsList(res.result.drugsSearchVoList)
        })
    }
      
  }, [value]);
 
  //模糊搜索(防抖)
  const handelSearchList=debounce((value:string)=>{
   setValue(value)
  },500)
  return (
    <div className={styles.MaxBox}>
        <div className={styles.header}>
          <ArrowLeft className={styles.ArrowLeft}  onClick={()=>navigate('/search')} />
      <VantSearch
      className={styles.VantSearch}
      shape="round"
      background="#fff"
      value={value}
      onChange={(value)=>handelSearchList(value)}
      placeholder="病症、药品名称、医生姓名"
    />
    <div>搜索</div>
     </div>
     <div className={styles.SearchList}>
      <div className={styles.doctorList}>
        <div className={styles.doctor}>医生</div>
         <ul>
          {
            doctorList.length>0?doctorList.map((v,i)=>{
              return <li key={v.doctorId}>{v.doctorName}</li>
            }):<div>暂无数据</div>
          }
         </ul>
      </div>
      <div className={styles.doctorList}>
        <div className={styles.doctor}>病症</div>
         <ul>
          {
            diseaseList.length>0?diseaseList.map((v,i)=>{
              return <li key={v.diseaseId} onClick={()=>navigate(`/healthDetail/${v.diseaseId}`)}>{v.diseaseName}</li>
            }):<div>暂无数据</div>
          }
         </ul>
      </div>
      <div className={styles.doctorList}>
        <div className={styles.doctor}>药品</div>
         <ul>
          {
            drugsList.length>0?drugsList.map((v,i)=>{
              return <li key={v.drugsId}>{v.drugsName}</li>
            }):<div>暂无数据</div>
          }
         </ul>
      </div>
     </div>
     
    </div>
  )
}
